<template>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<headNav :navTitle="navTitle"></headNav>
		</view>
		<view class="contentWrap" :style="{minHeight:'calc(100vh - '+(titleTop + statusBarHeight )+'px)'}">
			<view class="swiperWrap" v-if="newItemImages.length>0">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" @change="swiperChange">
					<swiper-item v-for="(item,index) in newItemImages" :key="index">
						<view class="swiper-item">
							<image :src="item.image_url|completeUrl" mode="aspectFit" class="swiperImg"></image>

						</view>
					</swiper-item>
				</swiper>
				<view class="miniImgWrap">
					<view class="wrapBox">
						<image :src="newItemImages[current-1].image_url|completeUrl" mode="aspectFill" class="bgImg">
						</image>
						<view class="more" v-if="false">
							查看全部<uni-icons class="icons" type="right" color="#333333" size="14"></uni-icons>
						</view>
					</view>
				</view>
				<view class="dots">
					<view class="current">{{current}}</view>
					<view class="all">
						{{newItemImages.length||0}}
					</view>
				</view>
			</view>
			<noData v-else></noData>
			<view class="cardWrap">
				<scroll-view scroll-x="true" class="nav-scroll">
					<!-- 导航项容器 -->
					<view class="nav-item" v-for="(item, index) in WatermarksWithImagesList" :key="index"
						@click="SelectItemFn(index)">
						<cardBag :cardData="item">
							<template #infoMore>
								<view class="price">
									<text class="unit">￥</text>
									{{item.price}}
								</view>
							</template>
						</cardBag>
					</view>
				</scroll-view>
				<view class="bntLay" @click="gotuFn">
					<view class="price" v-if="false">
						<text class="unit">￥</text>
						200
					</view>
					<image src="/static/bntBg.png" class="bntBg" mode="aspectFit"></image>
					<view class="bntTxt">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '全职高手',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 1,
		
				WatermarksWithImagesList: [/* {
					level: 0,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 1,
				}, {
					level: 1,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 2,
				}, {
					level: 2,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 3,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 4,
				}, */],
				newItemIndex:0,
				newItemImages: [],
			}
		},
		onLoad(e) {
			this.shopId = e.shopId;
			this.shopsWatermarksWithImagesFn();
		},
		methods: {
			swiperChange(e) {
				console.log(e, "sw");
				this.current = e.detail.current + 1
			},
			SelectItemFn(index) {
				this.newItemImages = [];
				this.newItemIndex = index;
				this.newItemImages = JSON.parse(JSON.stringify(this.WatermarksWithImagesList[index].Images || []));
				this.navTitle = this.WatermarksWithImagesList[index].name || ''
			},
			// 水印-列表
			shopsWatermarksWithImagesFn() {
				// {{apiurl}}v1/shops/watermarks-with-images?=&=
				this.$http('/v1/shops/watermarks-with-images', {
					keyword: '',
					shop_id: this.shopId,
				}).then(res => {
					console.log(res, "水印-列表");
					if (res.code == 0) {
						this.WatermarksWithImagesList = res.data.list;
						this.newItemImages = this.WatermarksWithImagesList[0].Images || [];
						this.navTitle = this.WatermarksWithImagesList[0].name
						console.log(this.newItemImages, "newItemImages");
						// this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})
			},
			gotuFn(){
				let item=JSON.stringify(this.WatermarksWithImagesList[this.newItemIndex]);
				uni.navigateTo({
					url:"/pages/index/watermarkPurchase"+"?shopId="+this.shopId+"&itemData="+item,
				})
			},
			
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;

		.mainHeader {
			@include flexLayout;
		}

		.contentWrap {
			background: #F9F9F9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.swiperWrap {
			width: 100%;
			position: relative;

			.swiper {
				height: 750upx;

				.swiper-item {
					display: block;
					height: 100%;
					position: relative;

					.swiperImg {
						width: 100%;
						height: 100%;
						background: #666;
					}
				}
			}

			.miniImgWrap {
				position: absolute;
				left: 48upx;
				bottom: 96upx;

				.wrapBox {
					@include setwh(250upx, 250upx);
					background: #D1AD8C;
					box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.38);
				}

				.bgImg {
					box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.38);
					transform: rotate(8deg);
					position: relative;
					left: 10upx;
					@include setwh(240upx, 240upx);
					border: 8upx solid #FFFFFF;
				}

				.more {
					@include flexLayout(center, center);
					position: absolute;
					right: 0;
					bottom: 8upx;
					// minh-width: 116rpx;
					// line-height: 1;
					height: 44rpx;
					background: #EEBB92;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(77, 77, 77, 0.5);
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 20rpx;
					color: #000000;
					padding: 6upx 10upx;
					line-height: 30rpx;

					.icons {
						margin-left: 6upx;
					}
				}
			}

			.dots {
				@include flexLayout;
				width: 116rpx;
				height: 40rpx;
				border-radius: 21rpx;
				backdrop-filter: blur(10px);
				overflow: hidden;
				position: absolute;
				right: 60upx;
				bottom: 36upx;

				view {
					flex: 1 1;
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40upx;
					text-align: center;
				}

				.current {
					background: rgba(104, 104, 104, 0.35);
				}

				.all {
					background: rgba(216, 216, 216, 0.35);
				}
			}
		}

		.cardWrap {
			margin-top: 40upx;
			background: #FFE9E9;
			border-radius: 42rpx 42rpx 0rpx 0rpx;
			border: 2rpx solid #FFD4D4;
			// height: calc(100vh - 750upx);
			padding-top: 30upx;
			position: relative;
			overflow: hidden;

			&::after,
			&:before {
				content: '';
				position: absolute;
				width: 332rpx;
				height: 426rpx;
				background: #FFD0D0;
				filter: blur(30upx);
				top: 0;
				z-index: 0;
				transform: rotate(45deg);
			}

			&::after {
				right: 0;
			}

			&:before {
				left: 86upx;
			}

			.nav-scroll,
			.bntLay {
				position: relative;
				z-index: 1;
			}

			.nav-scroll {
				white-space: nowrap;
				/* 防止子元素换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				-webkit-appearance: none;
				margin-left: 28upx;
				margin-bottom: 60upx;

				.nav-item {
					margin-right: 26upx;
					display: inline-block;
					margin-bottom: 16upx;

					.price {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 22rpx;
						color: #FF7994;
						line-height: 32rpx;
						text-align: right;
						padding-right: 6upx;

						.unit {
							font-size: 20rpx;
						}
					}
				}
			}

			.bntLay {
				width: 700rpx;
				height: 116rpx;
				border-radius: 65rpx;
				// border: 2rpx solid #FFD0D0;
				// background-color: #FFC8C8;
				margin: 0 auto 74upx;
				@include flexLayout(center, center);
				font-family: SourceHanSansSC, SourceHanSansSC;
				position: relative;

				.price {
					font-weight: bold;
					font-size: 38rpx;
					color: #FFFFFF;

					.unit {
						font-weight: 400;
						font-size: 32rpx;
					}
				}

				.bntBg {
					width: 700rpx;
					height: 116rpx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: -1;
				}

				.bntTxt {
					font-weight: 500;
					font-size: 32rpx;
					color: #9E4C4C;
					margin-left: 20upx;
				}
			}
		}

	}
</style>